<template>
  <div class="publish-container">
    <!--面包导航区域  -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/login' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/dynamicManage'}">动态管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加艺术涂料</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 标题 -->
      <div slot="header" class="clearfix">
        <span>内容添加</span>
      </div>
      <!-- 表单 -->
      <el-form ref="addDynamicRef" :model="dynamic" :rules="addFormRules" label-width="50px">
        <div class="dynamic-title">展示层</div>
        <el-form-item label="标题" prop="title">
          <el-input v-model="dynamic.title" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="英文" prop="EnglishName">
          <el-input v-model="dynamic.EnglishName" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input v-model="dynamic.content" show-word-limit></el-input>
        </el-form-item>

        <el-form-item label="封面">
          <el-radio-group v-model="dynamic.img" class="upload-img">
            <el-upload class="avatar-uploader" action="http://47.119.123.95:3000/dynamic/img" :show-file-list="false"
              :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="dynamic.img" :src="dynamic.img" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="分类">
          <el-select v-model="dynamic.classify" placeholder="请选择分类">
            <el-option label="案例" value="案例"></el-option>
            <el-option label="加盟" value="加盟"></el-option>
            <el-option label="新闻" value="新闻"></el-option>
          </el-select>
        </el-form-item>

        <!-- 详细层 -->
        <div class="dynamic-title" style="margin-top:80px">详细层</div>
        <!-- <el-form-item label="标题" prop="title">
          <el-input v-model="dynamic.details.title" show-word-limit></el-input>
        </el-form-item> -->

        <!-- <el-form-item label="封面" >
          <el-radio-group v-model="dynamic.details.img" class="upload-img">
            <el-upload
              class="avatar-uploader"
              action="http://47.119.123.95:3000/dynamic/img"
              :show-file-list="false"
              :on-success="handleAvatarSuccess2"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="dynamic.details.img" :src="dynamic.details.img" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-radio-group>
        </el-form-item> -->

        <!-- 文本内容区域 -->
        <el-form-item label="内容">
          <el-tiptap v-model="dynamic.details.article" :extensions="extensions" lang="zh" height="500"
            placeholder="请输入文章内容"></el-tiptap>
        </el-form-item>

        <el-form-item>
          <el-button @click="$router.go(-1)">返回</el-button>
          <el-button type="primary" @click="onPublish()">添加</el-button>
        </el-form-item>
      </el-form>

    </el-card>

  </div>
</template>

<script>
import { postAddDynamic, postAddImg } from '@/api/dynamic.js'
import {
  // necessary extensions
  ElementTiptap,
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  ListItem,
  BulletList,
  OrderedList,
  Image,
  CodeBlock,
  Link,
  TextAlign,
  Indent,
  TextColor,
  Preview,
  Fullscreen,
} from "element-tiptap";

// 富文本编辑器
import "element-tiptap/lib/index.css";
export default {
  name: 'AddDynamic',
  components: {
    "el-tiptap": ElementTiptap,
  },
  data () {
    return {
      //添加轮播图参数
      dynamic: {
        title: "",
        img: "",
        classify: "",
        EnglishName: null,
        content: "",
        details: {
          title: "",
          img: "",
          article: "",
        }
      },

      addFormRules: {
        title: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ],
        EnglishName: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ]
      },
      dynamicValidateForm: {
        domains: [{
          value: ''
        }],
        email: ''
      },
      //富文本功能
      extensions: [
        new Doc(),
        new Text(),
        new Paragraph(),
        new Heading({ level: 5 }), //标题
        new Bold({ bubble: true }), // render command-button in bubble menu.
        new Underline({ bubble: true }), //下划线
        new Italic(), //斜体
        new Strike(), //删除线
        new ListItem(),
        new BulletList(), //无序列表
        new OrderedList(), //有序列表
        new Image(
          {
            uploadRequest: (file) => {
              console.log(file)
              const fd = new FormData()
              fd.append('image', file)
              return postAddImg(fd).then(res => {
                // console.log(res.data)
                return res.data.url
              })
            }
          }
        ), //图片
        new CodeBlock(), //代码块
        new Link(), //连接
        new TextAlign(), //文本对齐
        new Indent(), //缩进
        new TextColor(), //文字样式
        new Preview(), //预览
        new Fullscreen(), //全屏
      ],
    };
  },
  computed: {},
  methods: {
    //添加艺术涂料
    async onPublish () {
      this.$refs.addDynamicRef.validate(async (valid) => {
        if (!valid) return
        const { data: res } = await postAddDynamic(this.dynamic);
        if (res.meta.status !== 200) return this.$message.error("添加艺术涂料失败");
        this.$message.success("添加艺术涂料成功");

        this.$router.push("/dynamicManage");
      })
    },
    handleAvatarSuccess (res, file) {
      console.log(res)

      this.dynamic.img = res.url;
      console.log(file)
    },
    // handleAvatarSuccess2(res, file,fileList) {
    //   this.dynamic.details.img = res.url;
    //   console.log(file)
    //   console.log(fileList)
    // },

    beforeAvatarUpload (file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  created () { },
  mounted () { },
};
</script>

<style  scoped>
.upload-img {
  border: 1px dashed;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.dynamic-title {
  color: #409eff;
  font-weight: 500;
  margin-bottom: 20px;
}
</style>